<template>
  <app-container left-width="40%">
    <left-layout slot="left">
      <div class="new-btn tr mb10">
          <zm-button type="success" @click="addMenu(addLevel0)" size="mini">
            新增一级
          </zm-button>
        </div>
      <menu-tree :data="menuList" :current-node-key="currentMenu.menuId" :highlight-current="true" @node-click="nodeClick" @add="addMenu" @edit="addMenu" @remove="removeMenu" @sort="sortMenu" :expended-keys.sync="expendedKeys" ref="menuTree">
        <template v-slot:btn="btn">
          <div class="switch-confirm">
            <el-switch v-model="btn.data.status" active-value="1" inactive-value="2">
            </el-switch>
            <div class="switch-mask" @click.stop="changeMenuStatus(btn.data.status,btn.data.menuId)"></div>
          </div>
        </template>
      </menu-tree>
    </left-layout>
    <div class="menu-detail">
      <menu-detail :params="currentMenu"></menu-detail>
    </div>
    <edit-menu v-model="showEdit" v-if="showEdit" :obj="menuObj" :user-tab-type="type" @after-save="afterAdd"></edit-menu>
    <!-- <cart-animate :click-time="animateClick"></cart-animate> -->
  </app-container>
</template>

<script>
import MenuTree from './components/MenuTree'
import { userTypeList, menuTreeData } from './const'
import systemMenu from '@/api/src/systemMenu'
import EditMenu from './components/EditMenu'
import MenuDetail from './components/MenuDetail'
// import CartAnimate from './components/CartAnimate'
import LeftLayout from '@/components/LeftLayout'
export default {
  name: 'MenuManage',
  components: {
    MenuTree,
    EditMenu,
    MenuDetail,
    // CartAnimate,
    LeftLayout
  },
  data () {
    return {
      type: '1',
      userTypeList: userTypeList(),
      menuList: [],
      showEdit: false,
      menuObj: {},
      expendedKeys: [],
      currentMenu: {
        menuId: ''
      },
      animateClick: true,
      addLevel0: {
        type: 'add',
        data: {
          menuId: '0',
          position: '1'
        },
        node: {}
      }
    }
  },
  computed: {},
  watch: {
    'currentMenu.menuId' () {
      this.$refs.menuTree.setCurrentKey(this.currentMenu.menuId)
    }
  },
  async created () {
    await this.getMenuTree()
    this.currentMenu = (this.menuList.length && this.menuList[0]) || {}
    document.addEventListener('click', () => {
      this.animateClick = !this.animateClick
      // console.log('click', this)
    })
  },
  methods: {
    async getMenuTree (menuId) {
      const res = await systemMenu.getMenuTree({status: '-1'})
      this.menuList = res
    },
    async afterAdd (res, obj) {
      console.log('after-add', res)
      await this.getMenuTree()
      this.currentMenu =
        typeof res === 'string'
          ? {
            id: res
          }
          : res
      this.expendedKeys = [this.menuObj.menuId]
      this.currentMenu = {...obj, ...this.currentMenu}
    },
    async removeMenu ({ node, data, type }) {
      console.log(node, data)
      this.$confirm('确定要删除该菜单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await systemMenu.deleteMenu(data.menuId)
        // const isExpended = this.expendedKeys.includes(data.parentId)
        // if (!isExpended)
        this.expendedKeys = [data.pId]
        this.$msg.success()
        await this.getMenuTree()
        if (+data.pId) {
          this.currentMenu = node.parent.data
        } else {
          this.currentMenu = (this.menuList.length && this.menuList[0]) || {}
          document.addEventListener('click', () => {
            this.animateClick = !this.animateClick
          })
        }
      })
    },
    nodeClick ({ data }) {
      console.log(data, 'data')
      this.currentMenu = data
    },
    async sortMenu (obj, parentMenu) {
      systemMenu
        .menuSort(obj)
        .then(async () => {
          await this.getMenuTree()
          this.currentMenu = parentMenu
        })
        .catch(async () => {
          await this.getMenuTree()
          this.currentMenu = parentMenu
        })
    },
    changeMenuStatus (status, menuId) {
      let statusParams = status === '1' ? '2' : '1'
      this.$confirm('确定进行该操作？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await systemMenu.setMenuStatus({ menuId, status: statusParams })
        await this.getMenuTree()
        this.currentMenu = (this.menuList.length && this.menuList[0]) || {}
        this.$message({
          message: '操作成功',
          type: 'success'
        })
      }).catch(() => {

      })
    },
    addMenu ({ node, data, type }) {
      this.menuObj = {
        ...data,
        operateType: type
      }
      this.showEdit = true
    }
  }
}
</script>

<style lang="scss" scoped>
.left-title {
  position: relative;
  .new-btn {
    position: absolute;
    right: 0;
    top: 0;
  }
}
.switch-confirm {
  display: inline-block;
  position: relative;
  .switch-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
  }
}
</style>
